<template>
	<view class="content">
		<view class="info">
			<view><text class="label">来访人姓名：</text><text>{{userNameStr}}</text></view>
			<view v-if="carNumber"><text class="label">车牌号：</text><text >{{carNumberStr}}</text></view>
			<view><text class="label">进校校区：</text>{{campusStr}}</view>
			<view><text class="label">进校日期：</text>{{dateTimeStr}}</view>
			<!-- <view><text class="zhu">注：所有的卡车、厢式货车、挂车、工程车等车辆，在工作日7:30-8:30禁止入校。</text></view> -->
		</view>
		<view class="box-wrapper">
			<view class="qr-box">
				<canvas canvas-id="qrcode" v-show="qrShow" style="width: 200px; height: 200px; 0 auto;"/>
			</view>
		</view>

		<view v-if="!isFail" class="tip">{{scends}}s 后刷新进校码，<text class="fresh" @click="fresh">立即刷新</text></view>
		<view  v-if="isSee" class="btn-wrapper padding flex flex-direction">
			<button class="cu-btn bg-blue lg" @click="back" >关闭</button>
		</view>
	</view>

</template>

<script>
	import uQRCode from '@/common/uqrcode.js'
	import baseUrl from '../../api/api.js'
	let Base64 = require('js-base64').Base64
	export default {
		props: [],
		data() {
			return {
				qrShow: false,
				userName: '',
				carNumber: '',
				dateTimeStr: '',
				campusStr: '',
				carNumberStr:'',
				userNameStr: '',
				scends: 30,
				isSee: '',
				isFail: false
				
			}
		},
		onLoad(params) {
			this.isSee = this.getParam(location.href, "see")
			this.id = decodeURIComponent(Base64.decode(this.getParam(location.href, "id")))
			this.cardNo = decodeURIComponent(Base64.decode(this.getParam(location.href, "cardNo")))
			this.getDetail()

			this.timer2 = setInterval(() => {
				this.scends--
				if(this.scends===0) {
					this.fresh()
				}
			}, 1000)
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: '进校码'
			})
		},
		onUnload() {
			clearInterval(this.timer)
			clearInterval(this.timer2)
		},
		methods: {
			back() {
				uni.navigateBack()
				clearInterval(this.timer)
				clearInterval(this.timer2)
			},
			fresh() {
				this.scends = 30
				clearInterval(this.timer)
				this.getCodeInfo()
				this.timer = setTimeout(() => {
					this.scends = 30
					this.getCodeInfo()
				}, 60000)
			},
			getCodeInfo() {
				if(this.id && this.cardNo) {
					uni.request({
						url: baseUrl.baseUrl + "zkd/qy/apply/qrcode/refresh",
						data: {
							applyId: this.getParam(location.href, "id"),
							cardNo: this.getParam(location.href, "cardNo"),
							source: this.getParam(location.href, "source"),
							carNumber: this.carNumber,
							userName: this.userName,
							dateTime: this.dateTime,
							campus: this.campus
						},
						method: 'POST',
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						success: (res) => {
							console.log('res', res);
							this.qrFun(res.data.data)
						}
					})
				}
			},
			getDetail() {
				uni.request({
					url: baseUrl.baseUrl + "zkd/qy/apply/detail",
					data: {
						applyId: this.getParam(location.href, "id"),
						cardNo: this.getParam(location.href, "cardNo")
					},
					method: 'GET',
					header: {
						'content-type': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						this.isFail = false
						this.dateTime = res.data.data.dateTime
						this.campus = res.data.data.campus
						this.carNumber = res.data.data.carNumber
						this.userName = res.data.data.userName

						this.dateTimeStr = decodeURIComponent(Base64.decode(this.dateTime))
						this.campusStr = decodeURIComponent(Base64.decode(this.campus))
						this.carNumberStr = decodeURIComponent(Base64.decode(this.carNumber))
						this.userNameStr = decodeURIComponent(Base64.decode(this.userName))
						this.fresh()
					},
					fail: () => {
						this.isFail = true
					}
				})

			},
			qrFun(text) {
				this.qrShow = true
				uQRCode.make({
					canvasId: 'qrcode',
					componentInstance: this,
					text: text,
					size: 200,
					margin: 0,
					backgroundColor: '#ffffff',
					foregroundColor: '#000000',
					fileType: 'jpg',
					errorCorrectLevel: uQRCode.errorCorrectLevel.L,
					success: res => {}
				})
			},
			getParam(path, name) {
				var reg = new RegExp("(^|\\?|&)" + name + "=([^&]*)(\\s|&|$)", "i");
				if (reg.test(path))
					return decodeURIComponent(decodeURIComponent(RegExp.$2.replace(/\+/g, " ")));
				return "";
			},

		}
	}
</script>

<style lang="scss">
	.content {
		padding-top: 6vh;
	}
	.zhu {
		color: #333;
		font-size: 28rpx;
	}
	.tip {
		text-align: center;
		margin-top: 60rpx;
		color: #666;
	}
	.fresh {
		color: #004d9f;
	}
	.info {
		margin-top: 60rpx;

		>view {
			width: 100%;
			padding: 0 20rpx;
			text-align: center;
			font-size: 36rpx;
			margin-bottom: 20rpx;
			color: #333;
			font-weight: 600;

			.label {
				display: inline-block;
				// width: 300rpx;
				text-align: right;
				flex-shrink: 0;
				color: #666;
				font-weight: normal;
			}
			.name {
				font-weight: 600;
			}
		}
	}
	.box-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.qr-box {
		width: 230px;
		height: 230px;
		// height: 600rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 15px;
		background: #ffff;
		padding: 15px;
		border-radius: 20rpx;
		background: url("
		2EENADAMw8CWP+hOGg3fGHT2I8ne3Y2X/YElQJb9P5wAbf4EiPMnAAGEwLQDMkAavxAYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8BCCAHaDtgAzQ5q8GxvkTgAB2gLQDMkAavxoYx08AAtgB
		2g7IAG3+amCcPwEIYAdIOyADpPGrgXH8Mw8/lv6Q2LXFhwAAAABJRU5ErkJggg==");

	}

	.btn-wrapper {
		width: 100vw;
		margin-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
		.cu-btn {
			width: 260rpx;
		}
	}
</style>
